<template>
  <div
    ref="generateForm"
    label-suffix=":"
    :size="data.config.size"
    :label-position="data.config.labelPosition"
    :label-width="data.config.labelWidth + '0px'"
  >
    <template>
      <grid-layout
        :layout.sync="data.list"
        :col-num="12"
        :row-height="10"
        :is-draggable="false"
        :is-resizable="false"
        :is-mirrored="false"
        :vertical-compact="true"
        :margin="[0, 0]"
        :use-css-transforms="true"
      >
        <grid-item
          v-for="item in data.list"
          :x="item.x"
          :y="item.y"
          :w="item.w"
          :h="item.h"
          :i="item.i"
          :key="item.key"
        >
          <div
            class="box-card-container"
            :style="{ paddingRight: item.x + item.w == 12 ? '0px' : '16px', paddingBottom: '16px' }"
          >
            <genetate-form-item :widget="item" />
          </div>
        </grid-item>
      </grid-layout>
    </template>
  </div>
</template>

<script>
import GenetateFormItem from './GenerateFormItem';
import VueGridLayout from 'vue-grid-layout';

export default {
  name: 'FmGenerateForm',
  components: {
    GenetateFormItem,
    GridLayout: VueGridLayout.GridLayout,
    GridItem: VueGridLayout.GridItem
  },
  props: ['data'],
  data() {
    return {};
  },
  created() {},
  mounted() {},
  methods: {}
};
</script>

<style lang="less">
.vue-grid-layout {
  min-height: 300px;
  .vue-grid-item-content {
    // 门户小页添加投影
    box-shadow: rgba(25, 0, 255, 0.1) 0 2px 6px 0;
  }
  .vue-grid-item {
    overflow: hidden;
    .box-card-container {
      width: 100%;
      height: 100%;
      padding-bottom: 10px;
      .fm-widget-col-list {
        height: 100%;
      }
    }
  }
}
</style>
